<template>
 <div>

   <span id="one" class="myFont"> hello {{msg}}</span>

   <button type="button" @click="login">演示</button>

   <button type="button" @click="judge">跳转到Test页面</button>
   <button type="button" @click="judge01">跳转到Test页面并传值</button>
   <ul v-for="x in list">
     <li>{{x.name}}</li>
     <li>{{x.age}}</li>
   </ul>

 </div>

</template>

<script>
/*第一种引入外部js*/
import {add} from '../../assets/js/mytest'
/*第一种引入外部js*/
import {delss} from '@/assets/js/mytest'

/*导入userInfo.js*/
import userInfo from "../../assets/js/UserInfo"

    export default {
        name: "Hello",
        data(){
          return{
              msg:"world",
              list:[]
          }
        },
        methods:{
            login(){
              var one = $("#one").text();
              alert(one);
              add();
              delss();
              userInfo.show();
            },
            loadData(){
              //假设ajax
              this.list=[
                {"name":"张三","age":23},
                {"name":"李四","age":22},
              ]
            },
             judge(){//组件调整
                //有回退功能，安全性低
                this.$router.push("/test");
                //没有回退功能，安全性高
                //this.$router.replace("/test");
             },
             judge01(){//调整页面并传值
                var num = 10;
                this.$router.push({"name":"test",query:{"info":this.msg,"num":num}})
             }
        },
        created() {//挂载函数
          this.loadData();
        }
    }
</script>

<style scoped>


</style>
